<#macro content_header>
<div class="main-content flex-fill grid-bg">
    <div class="big-header-banner">
        <div id="header" class="page-header sticky">
            <div class="navbar navbar-expand-md">
                <div class="container-fluid p-0">

                    <a href="" class="navbar-brand d-md-none" title='${paramsTag("siteTitle")!""}'>
                        <img src="${ctx()}/assets/images/gf.png" class="logo-light"
                            alt='${paramsTag("siteTitle")!""}'>
                        <img src="${ctx()}/assets/images/gf.png" class="logo-dark d-none"
                            alt='${paramsTag("siteTitle")!""}'>
                    </a>

                    <div class="collapse navbar-collapse order-2 order-md-1">
                        <div class="header-mini-btn">
                            <label>
                                <input id="mini-button" type="checkbox">
                                <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55"></path>
                                    <path class="line--2" d="M0 50h80"></path>
                                    <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45"></path>
                                </svg>
                            </label>

                        </div>

                <ul class="navbar-nav site-menu" style="margin-right: 16px;">

                    <li class="menu-item-has-children">
                        <a href="https://dh.greenflash.cn">
                            <i class="fa fa-home fa-lg mr-2"></i>
                            <span>绿闪导航</span>
                        </a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="https://www.greenflash.cn">
                            <i class="fa fa-home fa-lg mr-2"></i>
                            <span>官网</span>
                        </a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="https://www.greenflash.cn">
                            <i class="fa fa-book fa-lg mr-2"></i>
                            <span>关于</span>
                        </a>

                    </li>
                    <@menuTag>
                      <#if data?? &&(data?size>0)>
                        <#list data as item>
                           <#if  (item.children??) && (item.children?size>0)>
                                <li class="menu-item-has-children">
                                    <a href="#">
                                        <i class=" ${(item.menuIcon)!'fa'}   fa-book fa-cog fa-lg mr-2"></i>
                                        <span>${item.menuName!}</span>
                                    </a>
                                <#list item.children as ch>
                                    <ul class="sub-menu">
                                        <li><a href="${ch.url!}" target="${ch.target!"_blank"}">${(ch.menuName)!""}</a></li>
                                    </ul>
                               </#list>
                             </li>
                           <#else>
                                <li class="menu-item-has-children">
                                    <a href="${item.url!}" target="${item.target!"_blank"}">
                                        <i class=" ${(item.menuIcon)!'fa'} fa fa-book fa-lg mr-2"></i>
                                        <span>${item.menuName!}</span>
                                    </a>
                                </li>
                          </#if>
                        </#list>
                    </#if>
                  </@menuTag>

			    </ul>


                        <#if paramsTag("qweatherKey")??>
                        <div class="rounded-circle weather">
                            <div id="he-plugin-simple" style="display: contents;"></div>
                            <script>WIDGET = {
                                    CONFIG: {
                                        "modules": "01234",
                                        "background": 5,
                                        "tmpColor": "E4C600",
                                        "tmpSize": 14,
                                        "cityColor": "E4C600",
                                        "citySize": 14,
                                        "aqiColor": "#E4C600",
                                        "aqiSize": 14,
                                        "weatherIconSize": 24,
                                        "alertIconSize": 18,
                                        "padding": "10px 10px 10px 10px",
                                        "shadow": "1",
                                        "language": "auto",
                                        "borderRadius": 5,
                                        "fixed": "false",
                                        "vertical": "middle",
                                        "horizontal": "left",
                                        "key": '${paramsTag("qweatherKey")!""}'
                                    }
                                }
                            </script>
                            <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
                        </div>
                        </#if>
                    </div>

                    <ul class="nav navbar-menu text-xs order-1 order-md-2">
                        <!-- 一言 -->
                        <li class="nav-item mr-3 mr-lg-0 d-none d-lg-block">
                            <script>
                                fetch('https://v1.hitokoto.cn')
                                    .then(response => response.json())
                                    .then(data => {
                                    const hitokoto = document.getElementById('hitokoto_text')
                                    hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                                    hitokoto.innerText = data.hitokoto
                                    })
                                    .catch(console.error)
                            </script>                           
                            <div id="hitokoto"><a href="#" target="_blank" id="hitokoto_text">疏影横斜水清浅，暗香浮动月黄昏。</a></div>
                        </li>

                        <!-- 一言 end -->
                        <li class="nav-search ml-3 ml-md-4">
                            <a href="javascript:" data-toggle="modal" data-target="#search-modal"><i
                                    class="iconfont icon-search icon-2x"></i></a>
                        </li>
                        <li class="nav-item d-md-none mobile-menu ml-3 ml-md-4">
                            <a href="javascript:" id="sidebar-switch" data-toggle="modal"
                                data-target="#sidebar"><i class="iconfont icon-classification icon-2x"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="placeholder" style="height:74px"></div>
    </div>
</#macro>